<template>
	<view class="content">
		<!--  -->
		<!-- 确认兑换弹窗 -->
		<uni-popup :show="type === 'trans'" position="middle" mode="fixed" @hidePopup="togglePopup('')" style="position: relative;">
			<view class="uni-tip">
				<text class="uni-tip-content">请输入安全密码</text>
				<view class="safeinpbox" style="margin-bottom: 30upx;">
					<input type="password" value="" placeholder="输入安全密码"/>
				</view>
				<view class="uni-tip-group-button">
					<text class="backbtn" @click="confirmit()" >确定</text>
				</view>
			</view>
		</uni-popup>
		<view class="pageHeader">
			转出
			<view class="generalBack" @click="backpage()">
			  <image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			</view>
		</view>
		<view class="regoodbox">
			<view class="whitebox">
				<view  style="position: relative;z-index: 10;">
					<view class="flex aic jsb">
						<view class="flex aic" style="position: relative;">
							<text style="font-size: 30upx;color: #333;">获取</text>
							<text class="choosetxt" :class="{choosen:ischoosed}">{{ischoosed?filename:'（选择文件自动填入）'}}</text>
							
							<view style="padding: 10upx 0;" @click="filechoose">
								<image :src="mysrc" style="width: 30upx;height: 30upx;"></image>
							</view>
							<view class="filebox" v-if="isShow">
								<view v-for="(item,index) in myfile" :key="index" @click="choosefile(item)" class="fileitem flex aic">
									<view class="grey"></view>
									{{item.name}}
								</view>
							</view>
						</view>
						<view style="padding: 10upx 0;color: #EC6104;font-size: 30upx;" >
							余额：￥{{mybalance}}
						</view>
					</view>
				</view>
				<view class="codeitem" style="font-size: 30upx;color: #333;z-index:8;text-align: center;margin-top: 22upx;">
					<input type="number" placeholder="输入转出数量" v-model="transnum" style="color:#FF4242;font-size: 30upx;font-weight: bold;">
				</view>
			</view>
			
			<view class="filemsg">
				<view class="gettitle">收取文件地址</view>
				<view style="margin: 24upx 0;" class="flex aic">
					<view class="codeitem additem">{{fileaddress}}</view>
					<view class="copyaddress" @click="copyaddress()">复制</view>
				</view>
				<view class="codeitem areabox flex">
					<text class="beixt">备注：</text>
					<textarea v-model="beizhu" placeholder="输入备注"  :style="{height:inpHeight}" class="beizhuarea" @linechange="autoreply"/>
				</view>
			</view>
			
			<view class="service">
				<!-- <view class="buchang">
					<text>服务补偿:</text>
					<text class="behelind">000 F XXXX</text>
				</view> -->
				<view class="suretrans" @click="suretras()">
					确定
				</view>
			</view>
		</view>
		
	</view>
	</template>
	
	
	<script>
	import postAjax from '../../API/postAjax.js'
	import tkiQrcode from '../../components/tki-qrcode/tki-qrcode.vue'
	import uniPopup from '../../components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {
				userToken:'',// token
				// 余额
				mybalance:100,
				// 文件夹地址
				fileaddress:'adklosnjkasasjalshaihnalshnaudgsaidahshdoia',
				beizhu:'',
				inpHeight:'0',//textarea的高度
				type:'',
				transnum:null,
				filename:'',
				chfilebnum:null,
				code:'',
				// 图片路径
				mysrc:'../../static/exchange/top.png',
				ischoosed:false,
				isShow:false,
				myfile:[{'name':'SDWS',num:12.35},{'name':'DDB',num:12.35},{'name':'ERTC',num:12.35},{'name':'GTC',num:15.35}]
			}
		},
		onLoad(options) {
			let that = this
			that.userToken = uni.getStorageSync('token')
		},
		components:{
			uniPopup
		},
		methods: {
			// 返回上一页
			backpage(){
				uni.navigateBack({
					delta:1
				})
			},
			// 复制文本
			copyaddress(){
				uni.setClipboardData({
				    data:this.fileaddress,
				    success: function () {
				       uni.showToast({
				         title:'复制成功',
				         icon:'none'
				       })
				    }
				});
			},
			autoreply(e) {
				var that = this
				that.inpHeight = e.detail.height*2+'upx'
			},
			togglePopup(type) {
				this.type = type;
			},
			filechoose(){
				let that = this
				that.isShow = !that.isShow 
				that.mysrc =that.isShow?'../../static/exchange/up.png':'../../static/exchange/top.png'
			},
			choosefile(i){
				let that = this
				that.filename=i.name
				that.chfilebnum = Number(i.num)
				that.ischoosed = true
				that.isShow = false
				that.mysrc = '../../static/exchange/top.png'
			},
			suretras(){
				let that = this
				if(!that.filename){
					uni.showToast({
						title:'请选择文件',
						icon:'none'
					})
					return
				}
				if(that.transnum==0){
					uni.showToast({
						title:'请输入转出数量',
						icon:'none'
					})
					return
				}
				if(that.transnum>that.chfilebnum){
					uni.showToast({
						title:'您的'+that.filename+'不足',
						icon:'none'
					})
					return
				}
				if(!that.fileaddress){
					uni.showToast({
						title:'请输入文件地址',
						icon:'none'
					})
					return
				}
				that.type = 'trans'
			},
			confirmit(){
				that.type=''
			},
			confirmfile(){
				let that = this
				
				that.type = ''
			},
			// 分享
			share(){
				uni.share({
				    provider: "weixin",
				    scene: "WXSceneSession",
				    type: 0,
				    href: "http://www.baidu.com/",
				    title: '文件收取',
				    summary: '您有新的文件等待收取',
				    imageUrl: '',
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
						that.type=''
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
			},
		}
	}
	
</script>

<style>
	.content{min-height: 100vh;background-color: #f9f9f9;}
	.pageHeader{position: fixed;top:0;left:0;z-index:999;width: 100%;height: 128upx;background-color: #1D84E8;line-height: 128upx;text-align: center;font-size: 36upx;color: #fff;padding-top: 40upx;}
	.generalBack{position: absolute;top:40upx;left:30upx;display: block;}
	.regoodbox{padding: 180upx 0 110upx;}
	.codeitem{width:410upx;padding: 18upx 20upx;border:2upx solid #CBE5FF;border-radius: 6upx;}
	.whitebox{background-color: #fff;padding: 0 30upx 26upx;}
	.filemsg{margin-top: 10upx;background-color: #fff;padding: 30upx;}
	.gettitle{font-size: 30upx;font-weight: 600;}
	.additem{font-size: 28upx;color: #666;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
	.copyaddress{margin-left: 50upx;padding: 8upx 16upx;color: #fff;font-size: 28upx;background-color: #1D84E8;border-radius: 6upx;}
	.areabox{position: relative;}
	.beixt{font-size:28upx ;color: #333;}
	.beizhuarea{min-height:40upx;height: auto;flex:1;font-size: 28upx;
	overflow: hidden;resize: none;word-break: break-all;background-color: #fff;color: #666;}
	.choosetxt{font-size: 26upx;color: #999;display: inline-block;width:300upx;text-align: center;border-bottom:1px solid #707070;padding: 8upx 0;margin-left: 6upx;}
	.filebox{position: absolute;right:-50upx;top:64upx;font-size: 28upx;color: #666;width:200upx;box-shadow:0px 4upx 8upx rgba(203,229,255,1);;background-color: #fff;}
	.filebox>.fileitem:not(:last-child){border-bottom: 2upx solid #eee;}
	.fileitem{margin: 0 12upx;padding: 14upx 0;}
	.grey{width: 30upx;height: 30upx;background-color: #DDDDDD;margin-right: 18upx;}
	.choosen{color: #EC6104;font-weight:bold;}
	.service{background-color: #fff;padding:46upx 30upx 30upx;/* margin-top: 10upx; */}
	.buchang{font-size: 30upx;color: #333;}
	.behelind{margin-left: 50upx;}
	.suretrans{width: 170upx;text-align: center;color: #fff;background-color: #1D84E8;border-radius: 6upx;font-size: 30upx;padding:14upx 0 ;margin:80upx auto 0 ;}
	.safeinpbox{width: 310upx;padding: 16upx 0;margin: 0 auto;background-color: #CBE5FF;border-radius: 6upx;}
	.safeinpbox>input{text-align: center;width: 100%;}
	.uni-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		padding: 15px 0;
		width: 300px;
		background-color: #fff;
		border-radius: 10px;
	}
	
	.uni-tip-contents{
		padding:0 60upx;
		text-align: center;
		font-size: 16px;
		line-height: 1.5;
		color: #333;
	}
	.uni-tip-title {
		margin-bottom: 10px;
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		color: #333;
	}
	
	.uni-tip-content {
		padding: 20px 0;
		text-align: center;
		font-size: 16px;
		color: #333;
	}
	
	.uni-tip-group-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding-top: 15px;
	}
	.uni-tip-group{
		border-top: 1px solid #eee
	}
	.uni-tip-button {
		flex: 1;
		text-align: center;
		font-size: 14px;
		color: #3b4144;
	}
	.backbtn{
		width: 170upx;height: 68upx;line-height: 68upx;display: inline-block;margin: 0 auto;background-color: #1D84E8;border-radius: 6upx;text-align: center;font-size: 30upx;color: #fff;
	}
	
</style>

<template>
	<view class="content">
		<!--  -->
		<uni-popup :show="type === 'code'" position="middle" mode="fixed" @hidePopup="togglePopup('')" style="position: relative;">
			<view class="uni-tip">
				<view class="codeitem" style="position: relative;z-index: 10;">
					<view style="padding:0 30upx;" class="flex aic jsb">
						<view class="flex aic">
							<text style="font-size: 30upx;color: #333;">获取</text>
							<text class="choosetxt" :class="{choosen:ischoosed}">{{ischoosed?filename:'（选择文件自动填入）'}}</text>
						</view>
						
						<view style="padding: 10upx 0;" @click="filechoose">
							<image :src="mysrc" style="width: 36upx;height: 36upx;"></image>
						</view>
					</view>
					<view class="filebox" v-if="isShow">
						<view v-for="(item,index) in myfile" :key="index" @click="choosefile(item)" class="fileitem flex aic">
							<view class="grey"></view>
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="codeitem" style="font-size: 30upx;color: #333;z-index:8;text-align: center;margin-top: 22upx;">
					<input type="number" placeholder="输入数量" v-model="filenum" style="color:#FF4242;font-size: 30upx;font-weight: 600;">
				</view>
				<view  @click="confirmfile()" class="getcode">确定</view>
			</view>
		</uni-popup>
		<view class="pageHeader">
			收取
			<view class="generalBack" @click="backpage()">
			 <image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			 </view>
			 <view class="code" @click="saoma">
				 <image src="../../static/exchange/code.png" style="width: 26px;height:26px;"></image>
			 </view>
		</view>
		<view class="regoodbox">
			<view class="codebox">
				<view class="codetitle">扫二维码获取文件</view>
				<view class="codecont">
					<view class="borderin topleft"></view>
					<view class="borderin topright"></view>
					<view class="borderin btmleft"></view>
					<view class="borderin btmright"></view>
					<tki-qrcode ref="qrcode" :val="val" :size="size" :unit="unit"  :loadMake="loadMake"/>
				</view>
				<view style="margin-top: 50upx;">
					<view class="codeadd">文件夹地址</view>
					<view class="codeaddress">{{fileaddress}}</view>
				</view>
			</view>
		</view>
		<view class="customer">
			<view class=" flex aic jsb" style="padding:0 92upx;height: 100%;"> 
				<view class="flex aic" @click="share()">
					<image src="../../static/exchange/s-1.png" style="width: 40upx;height: 40upx;margin-right: 8upx;"></image>
					<text>分享</text>
				</view>
				<view class="flex aic"  @click="copytxt()">
					<image src="../../static/exchange/s-2.png"  style="width: 40upx;height: 40upx;margin-right: 8upx;"></image>
					<text>复制</text>
				</view>
				<image src="../../static/exchange/s-3.png" style="width: 40upx;height: 40upx;"></image>
			</view>
		</view>
	</view>
	</template>
	<script>
	import postAjax from '../../API/postAjax.js'
	import tkiQrcode from '../../components/tki-qrcode/tki-qrcode.vue'
	import uniPopup from '../../components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {
				userToken:'',// token
				// 文件夹地址
				fileaddress:'https://www.baidu.com',
				type:'code',
				filenum:null,
				filename:'',
				chfilebnum:null,
				code:'',
				// 图片路径
				mysrc:'../../static/exchange/top.png',
				ischoosed:false,
				isShow:false,
				// 要生成的二维码值
				val: 'https://www.baidu.com',
				size: 440, // 二维码大小
				unit: 'upx', // 单位
				loadMake: true, // 组件加载完成后自动生成二维码
				myfile:[{'name':'SDWS',num:12.35},{'name':'DDB',num:12.35},{'name':'ERTC',num:12.35},{'name':'GTC',num:15.35}]
			}
		},
		onLoad(options) {
			let that = this
			that.userToken = uni.getStorageSync('token')
		},
		components:{
			tkiQrcode,
			uniPopup
		},
		methods: {
			// 返回上一页
			backpage(){
				uni.navigateBack({
					delta:1
				})
			},
			// 复制文本
			copytxt(){
				uni.setClipboardData({
				    data:this.fileaddress,
				    success: function () {
				       uni.showToast({
				         title:'复制成功',
				         icon:'none'
				       })
				    }
				});
			},
			togglePopup(type) {
				this.type = type;
			},
			filechoose(){
				let that = this
				that.isShow = !that.isShow 
				that.mysrc =that.isShow?'../../static/exchange/up.png':'../../static/exchange/top.png'
			},
			choosefile(i){
				let that = this
				that.filename=i.name
				that.chfilebnum = Number(i.num)
				that.ischoosed = true
				that.isShow = false
				that.mysrc = '../../static/exchange/top.png'
			},
			confirmfile(){
				let that = this
				if(!that.filename){
					uni.showToast({
						title:'请选择文件',
						icon:'none'
					})
					return
				}
				if(that.filenum==0){
					uni.showToast({
						title:'请输入文件数量',
						icon:'none'
					})
					return
				}
				if(that.filenum>that.chfilebnum){
					uni.showToast({
						title:'您的'+that.filename+'不足',
						icon:'none'
					})
					return
				}
				that.type = ''
			},
			// 分享
			share(){
				uni.share({
				    provider: "weixin",
				    scene: "WXSceneSession",
				    type: 0,
				    href: "http://www.baidu.com/",
				    title: '文件收取',
				    summary: '您有新的文件等待收取',
				    imageUrl: '',
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
						that.type=''
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
			},
			saoma(){
				uni.scanCode({
				    onlyFromCamera: true,
				    success: function (res) {
				        console.log('条码类型：' + res.scanType);
				        console.log('条码内容：' + res.result);
						
				    }
				});
			}
		}
	}
	
</script>

<style>
	.content{min-height: 100vh;background-color: #fff;}
	.pageHeader{position: fixed;top:0;left:0;z-index:999;width: 100%;height: 128upx;background-color: #1D84E8;line-height: 128upx;text-align: center;font-size: 36upx;color: #fff;padding-top: 40upx;}
	.generalBack{position: absolute;top:40upx;left:30upx;display: block;}
	.code{position: absolute;padding:10upx 20upx;top:36upx;right:20upx}
	.regoodbox{padding: 180upx 30upx 110upx;}
	.codebox{margin-top: 63upx;padding: 94upx;border:4upx solid #CBE5FF;border-radius:20upx;text-align: center;}
	.codetitle{font-size: 42upx;color: #666;}
	.codecont{width: 440upx;height: 440upx;padding: 20upx;position: relative;margin-top: 36upx;border-radius: 12upx;}
	.codeadd{font-size: 32upx;color: #666;}
	.codeaddress{font-size: 32upx;color: #EC6104;margin-top: 30upx;}
	.borderin{width: 88upx;height: 88upx;position: absolute;}
	.topleft{top:0;left:0;border-top:6upx solid #1D84E8;border-left: 6upx solid #1D84E8;border-radius: 16upx 0 0 0 ;}
	.topright{top:0;right:0;border-top:6upx solid #1D84E8;border-right: 6upx solid #1D84E8;border-radius:0 16upx 0 0 ;}
	.btmleft{bottom:0;left:0;border-bottom:6upx solid #1D84E8;border-left: 6upx solid #1D84E8;border-radius:0 0 0 16upx;}
	.btmright{bottom:0;right:0;border-bottom:6upx solid #1D84E8;border-right: 6upx solid #1D84E8;border-radius:0 0 16upx 0;}
	.customer{position: fixed;width: 100%;left: 0;bottom: 0;font-size: 28upx;color: #666;z-index:100;height: 110upx;background-color: #F9F9F9;}
	
	.codeitem{padding: 20upx 0;margin: 0 40upx;border:2upx solid #CBE5FF;border-radius: 6upx;}
	.getcode{width: 170upx;height: 66upx;line-height: 66upx;background-color: #1D84E8;border-radius: 6upx;color: #fff;font-size: 30upx;margin: 40upx auto 0;text-align: center;}
	.choosetxt{font-size: 26upx;color: #999;display: inline-block;width: 306upx;text-align: center;border-bottom:1px solid #707070;padding: 8upx 0;margin-left: 6upx;}
	.filebox{position: absolute;right:0;top:96upx;font-size: 28upx;color: #666;width:200upx;box-shadow:0px 4upx 8upx rgba(203,229,255,1);;background-color: #fff;}
	.filebox>.fileitem:not(:last-child){border-bottom: 2upx solid #eee;}
	.fileitem{margin: 0 12upx;padding: 14upx 0;}
	.grey{width: 30upx;height: 30upx;background-color: #DDDDDD;margin-right: 18upx;}
	.choosen{color: #EC6104;font-weight: 600;}
	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #fff;
	
	}
	
	.empty image {
		width:240upx;
		margin-bottom: 30upx;
	}
	.empty-tips {
		display: flex;
		font-size: 30upx;
		color: #666;
	
	}
	.uni-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		padding: 36upx 0;
		width: 300px;
		background-color: #fff;
		border-radius: 10px;
	}
	
	
	. {
		
	}
</style>

